<extend name="public@base"/>
<block name="head">
<title>{$category.name}</title>
<style>
    .specialSmallTitle {
        font-size: 26px;
        color: #888;
        font-weight: bold;
        text-align: center;
    }
    .packageRow > div {
        margin-bottom: 20px;
    }
    .packageCont {
        color: black;
        font-size: 18px;
        text-align: center;
    }
    .single-blog-post {
        margin-bottom: 10px;
    }
    .packCont {
        text-align: center;
        color: black;
        font-size: 18px;
    }
    .lineBox {
        position: relative;
        height: 60px;
        text-align: center;
    }
    .throughline {
        position: absolute;
        width: 100%;
        top: 20px;
        margin-top: 0px;
        z-index: 1;
    }
    .throughIcon {
        position: absolute;
        width: 90px;
        background: white;
        padding: 0px 20px;
        z-index: 2;
        left: 50%;
        transform: translateX(-45px);
    }
    .hero-slider-item::before {
        background-color: transparent;
    }
    .detail {
        display: none;
    }
    .packageDetailBlock {
        display: none;
    }
</style>
</block>
<block name="body">
        <!-- 幻灯片 -->
        <div>
            <php>
                $photo_slide_id=empty($theme_vars['photo_slide'])?0:$theme_vars['photo_slide'];
            </php>
            <slides id="$photo_slide_id">
                <div class="container" style="position: relative;">
                    <a href="{$vo.url|default=''}"><img src="{:cmf_get_image_url($vo.image)}" alt="{$vo.title|default=''}" title="{$vo.title|default=''}" style="width: 100%;user-select: none;"></a>
                    <!-- <p class="bgImgText">GET IN TOUCH</p> -->
                </div>
            </slides>
            <noslides id="$photo_slide_id">
                <div class="container" style="position: relative;">
                    <a href="__ROOT__"><img src="__TMPL__/public/assets/img/bgboat.png" alt="This slide is just a demonstration, you have not set any slides, please go to the background template settings!" title="This slide is just a demonstration, you have not set any slides, please go to the background template settings!" style="width: 100%;user-select: none;"></a>
                    <!-- <p class="bgImgText">GET IN TOUCH</p> -->
                </div>
            </noslides>
        </div>
        
        <!-- Packages -->
        <section class="latest-news pt-100 pb-180 white-bg" style="padding-top: 30px;">
            <div class="container packagesShow">
                <div class="row packageRow" style="padding-top: 30px;">
                    <portal:articles order="post.create_time DESC" page="theme_vars.page_count" relation="categories" categoryIds="$category.id">
                        <div class="col-md-6 col-sm-6 col-12">
                            <h3 class="specialTitle">{$vo.post_title}</h3>
                            <div class="hrLine"></div>
                            <div class="specialSmallTitle">{$vo.post_source}</div>
                            <div class="single-blog-post">
                                <a href="javascript:;">
                                    <img src="{$vo.thumbnail|default=$vo.more.thumbnail|cmf_get_image_url}" alt="PHOTO GALLERY">
                                </a>
                            </div>
                            <div class="packageCont">
                                {$vo.post_excerpt}
                            </div>
                            <div class="text-center" style="margin-top: 10px;">
                                <button id="packagedetails{$key}" packType="{$key}" class="specialBtn">PACKAGE DETAILS</button>
                            </div>
                        </div>
                    </portal:articles>
                </div>
            </div>

            <div class="container detail">
                <div>
                    <portal:articles order="post.create_time DESC" page="theme_vars.page_count" relation="categories" categoryIds="$category.id">
                        <div class="packageDetailBlock detail{$key}">
                            <h3 class="specialTitle">{$vo.post_title}</h3>
                            <div class="specialSmallTitle">{$vo.post_source}</div>
                            <div>
                                <empty name="vo.more.photos">
                                <else/>
                                    <div class="packagedetail{$key}" style="margin-top: 30px;">
                                        <div class="hero-slider owl-carousel owl-theme owl-theme-1">
                                            <foreach name="vo.more.photos" item="st" key="i">
                                                <div class="hero-slider-item item-bg-{$i}" style="background-image:url({$st.url|default='__TMPL__/public/assets/img/indexpackage.png'|cmf_get_image_url})" ></div>
                                            </foreach>
                                        </div>
                                    </div>
                                </empty>
                            </div>
                            <div class="packCont">
                                {$vo.post_content}
                            </div>
                        </div>
                    </portal:articles>
                </div>

                <div class="text-center" style="margin-top: 30px;">
                    <button id="bookBtn" class="specialBtn">Book Now</button>
                </div>
            </div>
        </section>
        <!-- End Packages -->
    <block name="scripts">
        <script>
            (function ($) {
                "use strict";

                $('.specialBtn').click(function () {
                    $('.packagesShow').css({'display': 'none'});
                    $('.packageDetailBlock').css({'display': 'none'});
                    $('.detail').css({'display': 'block'});
                    var packType = $(this).attr('packType');
                    $('.detail'+packType).css({'display': 'block'});
                });
                $('#bookBtn').click(function(){
                    $('.detail').css({'display': 'none'});
                    $('.packagesShow').css({'display': 'block'});
                })
            } (jQuery));
        </script>
    </block>
</block>